<template>
  <!-- 同类其他产品 -->
  <div class="bottomPc">
    <div class="title">
      <div class="line"></div>
      <div class="text">同类其他产品</div>
    </div>
    <!-- 新版swiper -->
    <swiper
      :slidesPerView="5"
      loop
      :autoplay="{
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      }"
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-container-button-next',
        prevEl: '.swiper-container-button-prev',
      }"
      v-if="list.length"
    >
      <swiper-slide class="swiper-slide" v-for="item in list" :key="item.id">
        <router-link
          class="content"
          :to="{
            name: 'productDetail',
            query: {
              id: item.id,
            },
          }"
        >
          <img class="img" :src="item.images" />
          <div class="text">{{ item.name }}</div>
        </router-link>
      </swiper-slide>

      <template #container-start>
        <div class="swiper-container-button swiper-container-button-next"></div>
        <div class="swiper-container-button swiper-container-button-prev"></div>
      </template>
    </swiper>
  </div>

  <!--移动端 -->
  <div class="mobile">
    <div class="frame">
      <div class="title">
        <div class="line"></div>
        <div class="text">同类其他产品</div>
      </div>

      <!-- 新版swiper -->
      <swiper
        :slidesPerView="3"
        loop
        :autoplay="{
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }"
        class="swiper-container"
        :navigation="{
          nextEl: '.swiper-container-button-next',
          prevEl: '.swiper-container-button-prev',
        }"
      >
        <swiper-slide class="swiper-slide" v-for="item in list" :key="item.id">
          <router-link
            class="content"
            :to="{
              name: 'productDetail',
              query: {
                id: item.id,
              },
            }"
          >
            <img class="img" :src="item.images" />
            <div class="t">{{ item.name }}</div>
          </router-link>
        </swiper-slide>

        <template #container-start>
          <div
            class="swiper-container-button swiper-container-button-next"
          ></div>
          <div
            class="swiper-container-button swiper-container-button-prev"
          ></div>
        </template>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {};
  },

  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .mobile {
    display: none;
  }

  .bottomPc {
    margin-top: 100px;
    display: block;
    width: 1200px;
    height: 424px;
    background: #ffffff;
    box-shadow: 0px 6px 38px 0px rgba(254, 221, 188, 0.16);

    .title {
      margin-top: 49px;
      display: flex;
      height: 30px;
      align-items: center;
      margin-left: 33px;

      .line {
        width: 4px;
        height: 24px;
        background: color.$base;
      }

      .text {
        margin-left: 15px;
        font-size: 24px;
        color: color.$base;
        line-height: 60px;
      }
    }

    .swiper-container {
      margin-top: 80px;
      box-sizing: border-box;
      width: 1180px;
      display: flex;
      align-items: center;
      // padding: 0 20px;

      &-button {
        width: 20px;
        height: 20px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 11;

        &-prev {
          left: 0;
          width: 19px;
          height: 79px;
          background-size: 12px;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url("~@/assets/image/home/ic_left.png");

          &:hover {
            background-size: 8px;
            background-color: color.$base;
            background-image: url("~@/assets/image/home/ic_left_white.png");
          }
        }

        &-next {
          right: 0;
          width: 19px;
          height: 79px;
          background-size: 12px;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url("~@/assets/image/home/ic_right.png");

          &:hover {
            background-size: 8px;
            background-color: color.$base;
            background-image: url("~@/assets/image/home/ic_right_white.png");
          }
        }
      }

      .swiper-slide {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        .content {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 180px;
          height: 200px;
          background: #f8f8f8;
          margin: auto;

          img {
            margin-top: 15px;
            @include fn.scale(155px);
          }

          .text {
            width: 100%;
            margin-top: 20px;
            width: 150px;

            @include fn.describe(2);
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .bottomPc {
    display: none;
  }

  .mobile {
    margin-top: fn.rpx(40);
    display: flex;
    justify-content: center;
    width: 100%;
    height: fn.rpx(354);

    .frame {
      background: #fff;
      width: fn.rpx(700);
      box-shadow: 0px fn.rpx(6) fn.rpx(38) 0px rgba(254, 221, 188, 0.16);

      .title {
        margin-top: fn.rpx(49);
        display: flex;
        height: fn.rpx(30);
        align-items: center;
        margin-left: fn.rpx(33);

        .line {
          width: fn.rpx(4);
          height: fn.rpx(24);
          background: color.$base;
        }

        .text {
          margin-left: fn.rpx(15);
          font-size: fn.rpx(24);

          font-weight: fn.rpx(400);
          color: color.$base;
          line-height: fn.rpx(60);
        }
      }

      .swiper-container {
        margin-top: fn.rpx(30);
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        // padding: 0 fn.rpx(30);

        &-button {
          width: 20px;
          height: 20px;
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          cursor: pointer;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          z-index: 11;

          &-prev {
            left: fn.rpx(4);
            width: fn.rpx(19);
            height: fn.rpx(79);

            background-size: fn.rpx(18);
            background-position: center;
            background-repeat: no-repeat;
            background-image: url("~@/assets/image/home/ic_left.png");

            &:hover {
              width: fn.rpx(19);
              height: fn.rpx(79);
              background-color: color.$base;

              background-size: fn.rpx(12);
              background-position: center;
              background-repeat: no-repeat;
              background-image: url("~@/assets/image/home/ic_left_white.png");
            }
          }

          &-next {
            right: fn.rpx(4);
            width: fn.rpx(19);
            height: fn.rpx(79);
            background-size: fn.rpx(18);
            background-position: center;
            background-repeat: no-repeat;
            background-image: url("~@/assets/image/home/ic_right.png");

            &:hover {
              width: fn.rpx(19);
              height: fn.rpx(79);
              background-color: color.$base;

              background-size: fn.rpx(12);
              background-position: center;
              background-repeat: no-repeat;
              background-image: url("~@/assets/image/home/ic_right_white.png");
            }
          }
        }

        .swiper-slide {
          cursor: pointer;

          display: flex;

          justify-content: center;

          align-items: center;

          .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: fn.rpx(180);
            height: fn.rpx(160);
            background: #f8f8f8;

            img {
              width: fn.rpx(180);
              height: fn.rpx(101);
            }

            .t {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              padding: 0 fn.rpx(10);
              margin-top: fn.rpx(10);

              @include fn.describe(2);
            }
          }
        }
      }
    }
  }
}
</style>